<template>
    <!-- 订单支付页面 马佳乐 2023年7月6日09点05分 -->
    <div class="div1">
        <!-- 卡片部分 -->
        <div class="box-card">
            <!-- 确认订单信息 -->
            <div class="div1-2">
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="span1">确认订单信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="span1-2">请在两小时内完成支付，否则订单就会自动取消</span>
                <span class="span1-3">___________________________________________________________________________________________________________________________</span>
            </div>
            <!-- 账号信息 -->
            <div class="div1-3">
                <div class="div1-3-1">
                    <!-- 头像 -->
                    <div class="div1-3-1-1">
                        <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + avatarUrl" class="img3">
                    </div>
                </div>
                <!-- 信息 -->
                <div class="div1-3-2">
                    <br>
                    <span class="span2">购买账号：{{user.loginName}}</span>
                    <br>
                    <span class="span2-1">注意：购买后不支持退款、转让，请确认开课时间或有效期后再提交订单</span>
                </div>
            </div>
            <!-- 支付方式 -->
            <div class="div1-4">
                <div class="div1-4-1">
                    <span class="span3">支付方式</span>
                </div>
                <div class="div1-4-2">
                    <!-- <div class="div1-4-3"> -->
                        <img src="../../assets/zhifubao.jpg" class="img1">
                    <!-- </div> -->
                    <div class="div1-4-3">
                        <span class="span4">支付宝</span>
                    </div>
                </div>
            </div>
            <!-- 购买课程信息 -->
            <div class="div1-5">
                <!-- 购买课程 -->
                <div class="div1-5-1">
                    <span class="span3">购买课程</span>
                </div>
                <!-- 课程信息 -->
                <div class="div1-5-2">
                    <div class="div111"></div>
                    <!-- 课程图片 -->
                    <div class="div1-5-2-1">
                        <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + imageId" class="img2">
                    </div>
                    <!-- 详细信息 -->
                    <div class="div1-5-2-2">
                        <span class="span5">{{courseTitle}}</span>
                        <br>
                        <span class="span5-1">永久可看</span>
                    </div>
                    <!-- 课程价格 -->
                    <div class="div1-5-2-3">
                        <span class="span6">￥{{price}}</span>
                    </div>
                    <span class="span1-3">___________________________________________________________________________________________________________________________</span>
                </div>
            </div>
        </div>
        <br>
        <!-- 立即支付 -->
        <el-card class="div2">
            <div class="div2-1">
                <div class="div222"></div>
                <span class="span6-1">提交订单表示您同意</span>
                <span class="span6-2" @click="agreementwindows">《非凡教育用户服务协议》</span>
                <span class="span6-3">等</span>
            </div>
            <!-- 立即支付 -->
            <div class="div2-2">
                <!-- 价钱 -->
                <div class="div2-2-1">
                    <!-- 实付 -->
                    <span class="span7-1">实付：</span>
                    <!-- 价格 -->
                    <span class="span7-2">￥{{price}}</span>
                </div>
                <!-- 按钮 -->
                    <el-button type="success" class="div2-2-2" style="font-size: 25px;" @click="tiao()">立即支付</el-button>
                <!-- </div> -->
            </div>
        </el-card>
        <el-dialog :visible.sync="updateadd" width="39%" :before-close="handleClose()" style="text-align:left">
                <div slot="title" class="header-title" style="text-align:left;font-weight: bold;color:white;font-size:18px;margin-bottom: 10px;">
                </div>
                <el-form stripe style="width: 100%">
                   
                    <el-form-item width="300px">
                      <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + imageId" class="img2">
                    </el-form-item>

                </el-form>
                <div style="text-align:center">
                  <el-button style="background-color:rgb(234,244,255);color:rgb(96,169,255)" @click="updatestate()">确定支付</el-button>
                  <el-button @click="updateadd = false" style="background-color:rgb(234,244,255);color:rgb(96,169,255)">取消支付</el-button>
                </div>
            </el-dialog>
        <el-dialog title="非凡教育用户服务协议" :visible.sync="agreement" width="50%">
            <div class="div3">
                <p>1. 协议条款的确认和接纳</p>
                <p>1.1 欢迎注册、登录非凡教育平台（以下简称“本平台”或“非凡教育”）、使用非凡教育平台服务
                    （以下简称“本服务”或“非凡教育服务”），请您仔细阅读以下全部内容（特别是粗体标注的内容）。本协议是您与非凡教育之间关
                    于非凡教育服务的条款，内容包括本协议正文 、本协议明确援引的其他协议
                    及非凡教育已经发布的或将来可能发布的各类协议和规则。所有协议内容为本协议不可分割的组成部分，与本协议正文具有
                    同等法律效力。除另行明确声明外，您使用非凡教育服务的行为将受本协议约束。</p>
                <p>1.2 如您选择“点击同意”本协议或者以其他方式开始使用非凡教育服务，即表示已经与非凡教育达成协议，
                    并自愿接受本协议的所有内容。您确认，您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力，
                    确保有能力对您使用追云工作室提供服务的一切行为独立承担责任。若您不具备前述主体资格或您是未满十八周岁的
                    未成年人，请在您的监护人的陪同下阅读本服务条款，并在取得他们对您使用服务的行为，以及对本服务条款的同意之
                    后，使用本服务；追云工作室在依据法律规定或本协议约定要求您承担责任时，有权向您的监护人追偿。</p>
                <p>1.3 非凡教育有权根据法律规范及运营的合理需要，不断修改和完善本协议，并在本平台（study.163.com）
                    公告。如您继续使用非凡教育服务，即意味着同意并自愿遵守修改后的协议条款，亦或您有权终止使用。</p>
                <p>2. 定义</p>
                <p>2.1 您：指注册帐号并经非凡教育审核同意后，在非凡教育上观看、学习课程的用户。</p>
                <p>2.2 非凡教育平台（或非凡教育不时修改的其他名称）：是追云工作室出品的，与优秀教育者与教育机构合作，为用户
                    提供教学内容的生成、传播和消费服务，由追云工作室所有和经营的有关教育、学习等数字内容聚合、管理的线上教育产品，包括
                    但不限于web端（网站网址：study.163.com及其不时更换的域名）及其各移动端（包括但不限于更新后的版本）。</p>
                <p>2.3 课程：指由非凡教育提供的，在非凡教育平台上陈列、展示、供用户观看、学习的视频、语音、文字、图片
                    、链接等课程作品/制品。本定义下的课程包括免费课程与收费课程。</p>
                <p>2.3.1 免费课程：指非凡教育无偿提供的，供用户免费观看、使用的课程。</p>
                <p>2.3.2 收费课程：指非凡教育有偿提供的，供用户付费观看、使用的课程。</p>
                <p>2.3.3 VIP会员权益：指会员在注册成功后，根据向非凡教育支付对价，所获得的针对非凡教育特定课程的优惠
                    购买价格、课程免费观看资格、免费阅读电子书、优惠券礼包及其他会员特有优惠权益，具体内容以《非凡教育VIP会员使
                    用协议》、云课堂官网、相关页面上发布的公告、规则为准。</p>
                <p>3. 帐号注册与使用</p>
                <p>3.1 您可浏览非凡教育上的课程信息，如您希望观看、学习该课程，您需先登录您的帐号，或注册非凡教育认可的帐
                    号并登录。如您选用其他第三方帐号登录非凡教育的，您应保证第三方帐号的稳定性、真实性以及可用性，如因第三方
                    帐号原因（如第三方帐号被封号）致使您无法登录非凡教育的，您应与第三方帐号的所属公司联系。您注册登录的帐号
                    是非凡教育确认您身份的唯一依据。</p>
                <p>您充分了解并同意，您必须为自己注册帐号下的一切行为负责，包括但不限于您所发表的任何内容以及由此产生的任何后果。
                    您应对本服务中的内容自行加以判断，并承担因使用内容而引起的所有风险，包括因对内容的正确性、完整性或实用性的依赖而产生的风险。</p>
                <p>3.2 注册完成后，请您妥善保存有关帐号和密码，并对该帐号进行的所有活动和行为负责。如因您自身原因（包括但不限于转
                    让帐号、与他人共用、自己泄露等）或您所用计算机或其他终端产品感染病毒或木马，而导致帐号密码泄露、遗失或其他损失后果将由您独自承担。</p>
                <p>3.3您在注册帐号时承诺遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德
                    风尚和信息真实性等七条底线，不得在帐号注册资料中出现违法和不良信息。</p>
                <p>3.4非凡教育有权对您提供的帐号注册资料进行审查，若发现或者收到举报确认注册资料存在不准确、不真实，
                    或含有违法、不良信息，非凡教育有权不予注册，并保留终止您使用非凡教育平台的权利。若您以虚假信息骗取帐
                    号注册或帐号注册资料存在侵权、违法和不良信息的，非凡教育有权采取通知限期改正、暂停使用、注销登记等措施。
                    对于冒用其他机构或他人名义注册帐号名称的，非凡教育有权注销该帐号，并向政府主管部门进行报告。</p>
                <p>3.5根据相关法律、法规规定以及考虑到追云产品服务的重要性，您同意：</p>
                <p>（1）在注册帐号时提交有效准确的个人信息进行实名认证；</p>
                <p>（2）提供及时、详尽及准确的帐户注册资料；</p>
                <p>（3）不得以营利、任何不正当手段或以违反诚实信用原则等为自己或他人开通、使用本服务；</p>
                <p>（4）对其自身帐号中的所有行为和事件负全责，不得售卖、转借帐号，不得私自进行帐号的交易、私
                    自进行非凡教育虚拟货币（包括但不限于追云学习币等）或其他积分等交易活动。</p>
                <p>如出现以上任何行为之一的，将按照本服务条款承担相应的违约责任，如因此导致您无法继续使用非凡教育相关服务的，您应当自行承担后果。</p>
                <p>3.6 您若发现自身帐号或密码被他人非法使用或有登录、使用异常情况的，应及时通知非凡教育，非凡教育将按照本协议或法律规定进行处理。</p>
                <p>3.7您应当通过追云官方提供的正当合法途径付费以获得全部服务，其他非官方途径付费充值的，均不享受追云
                    公司保护，如追云工作室发现用户未支付非凡教育官网对价或未通过非凡教育官网途径获取非凡教育服
                    务的，追云工作室有权限制、中止或终止用户帐号的登录和使用，停止向用户提供服务，
                    追云工作室无需向用户退还已支付的任何费用。</p>
                <p>3.8您在购买非凡教育课程后，应当在课程有效期限内完成学习。如课程已到期，用户要求继续学
                    习的或要求退款的，追云工作室不予支持。</p>
                <p>3.9您了解并同意，非凡教育可能会基于自身原因（
                    包括但不限于：更新课程内容、改进课程安排）不定期的对付费服务内容或功能进行更新而无需经过您的事先同意。</p>
                <p>3.10您应使用非凡教育正版课程资料，若用户出现包括但不限于违规倒卖课程、违规使用听课帐号、在
                    课程服务使用中反复使用侮辱语言、严重扰乱课堂秩序、威胁辱骂老师、恶意批量差评 、恶意骚扰客服、
                    煽动用户退款、冒充非凡教育工作人员等行为，一经证实，追云工作室有权将此听课帐号做封
                    号处理并保留追究法律责任的权利。</p>
                <p>4. 数据</p>
                <p>在法律法规允许的范围内，用户同意非凡教育帐号所有权，以及与注册、使用非凡教育帐号相关的服务
                    数据和记录，包括但不限于所有注册、登录、消费记录和相关的
                    使用统计数据，归追云工作室所有。除非另有证明，非凡教育储存在其服务器上的数据是您
                    使用非凡教育服务的唯一有效证据。</p>
                <p>5. 非凡教育使用规则</p>
                <span>5.1 您不得利用非凡教育平台制作、复制、发布、传播如下法律、法规和政策禁止的内容：
                    <br>5.1.1 反对宪法所确定的基本原则的；
                    <br>5.1.2 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
                    <br>5.1.3 损害国家荣誉和利益的；
                    <br>5.1.4 煽动民族仇恨、民族歧视，破坏民族团结的；
                    <br>5.1.5 破坏国家宗教政策，宣扬邪教和封建迷信的；
                    <br>5.1.6 散布谣言，扰乱社会秩序，破坏社会稳定的；
                    <br>5.1.7 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
                    <br>5.1.8 侮辱或者诽谤他人，侵害他人合法权益的；
                    <br>5.1.9 煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
                    <br>5.1.10 以非法民间组织名义活动的；
                    <br>5.1.11 含有法律、法规和政策禁止的其他内容的信息。
                </span>
                <p>5.2 您不得利用非凡教育平台制作、复制、发布、传播包括但不限于如下干扰平台的正常运营，
                    以及侵犯其他主体或第三方合法权益的内容：</p>
                <span>5.2.1 广告、骚扰、垃圾信息的；
                    <br>5.2.2 涉及他人隐私、个人信息或资料的；
                    <br>5.2.3 侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的；
                    <br>5.2.4 强制、诱导其他用户关注、点击链接页面或分享信息的；
                    <br>5.2.5 虚构事实、隐瞒真相以误导、欺骗他人的；
                    <br>5.2.6 未经非凡教育书面许可利用平台为第三方进行推广的（包括但不限于加入第三方链接、广告等行为）；
                    <br>5.2.7 未经非凡教育书面许可使用插件、外挂或其他第三方工具、服务接入非凡教育平台和相关系统；
                    <br>5.2.8 利用平台从事任何违法犯罪活动的；
                    <br>5.2.9 制作、发布与以上行为相关的方法、工具，或对此类方法、工具进行运营或传播，无论这些行为是否为商业目的；
                    <br>5.2.10 其他违反法律法规规定或干扰平台正常运营的行为。
                </span>
                <p>5.3 您了解并同意，非凡教育有权应有关部门的要求，向其提供您提交给非凡教育或在使用非凡教育服务中存储于
                    非凡教育服务器的必要信息。如您涉嫌侵犯他人合法权益，则非凡教育有权在初步判断涉嫌侵权行为存在的情
                    况下，向权利人提供关于您的前述必要信息。</p>
                <p>5.4您知悉并同意，您购买的付费服务仅限于您自行使用，您无权对购买的收费课程及相关增值服务进行出售、转让、许可、
                    传播或以其他方式使除您自己以外的第三方（包括但不限于自然人、法人或其他组织）使用。
                    非凡教育有权视您违反本协议行为的严重程度，对您采取以下单项或多项措施：</p>
                <span>5.4.1取消您继续使用该付费服务的权利；
                    <br>5.4.2 限制、暂停/终止提供全部或部分服务；
                    <br>5.4.3 删除违规内容；
                    <br>5.4.4要求您退还通过出售、转让、许可等其他方式取得的收益；
                    <br>5.4.5 暂时/永久封禁帐号；
                    <br>5.4.6 其他非凡教育采取的合理措施。
                    <p>如您因违规被暂停部分或全部服务，终止部分服务、被限制/中止帐号的登录和
                        使用，对您已购买的课程费用，追云工作室将不予退回。如您被终止全部服务或终止帐号登录的，
                        非凡教育无需向您退还已支付的任何课程费用。</p>
                    <p>5.5 如果您违反本协议的行为给非凡教育或其他第三方造成损失的，您应当对此承担法律责任。您承担
                        法律责任的形式包括但不限于：对受到侵害者进行赔偿；以及在非凡教育首先承担了因您的行为导致的行
                        政处罚或侵权损害赔偿责任后，您应给予非凡教育等额的赔偿。若您帐户内有剩余款项的，非凡教育有权不
                        予退回，若不足以赔偿非凡教育损失的，非凡教育仍有权要求您补足相应的损失。</p>
                    <p>5.6 如果您行使本协议规定的权利而购买/接受非凡教育以外的第三方提供的内容或服务，如
                        因此发生纠纷的，您应向销售/提供该内容或服务的第三方主张权利，与非凡教育无关。</p>
                    <p>5.7 对于在本平台上的内容, 非凡教育不对其适用性或满足您特定需求及目的进行任何明示或者默示的担保。
                        除非追云工作室以书面形式明确约定，追云工作室对于用户以任何方式（包括但不限于包含、
                        经由、连接或下载）从本网站所获得的任何内容信息，包括但不限于音频内容、广告内容、其他用
                        户信息、商户信息、用户评价内容等，不保证其准确性、完整性、可靠性。</p>
                </span>
            </div>
        </el-dialog>
        <br>
    </div>
</template>

<script>
export default {
    data() {
        return {
          OrderData:[],
          updateadd: false,
          user:JSON.parse(window.sessionStorage.getItem('user')),
          avatarUrl:window.sessionStorage.getItem('avatarUrl'),
          price:window.sessionStorage.getItem('price'),
          courseTitle:window.sessionStorage.getItem('courseTitle'),
          imageId: window.sessionStorage.getItem('imageId'),
            // 打开页面是用户协议处于关闭状态
            agreement: false
        }
 },
    
    mounted() {
      this.getOrder()

  },
    methods: {
      //全查-模糊查
      getOrder() {
            this.$axios
                .get("/order/getFilePriceById", {
                    params: {
                      courseId:window.sessionStorage.getItem('idss'),
                      userId:this.user.id
                    }
                })
                .then((res) => {
                    if (res.data.code) {
                        this.OrderData = res.data.data;
                    }
                })
                .catch((err) => {
                    this.myMessage("error", err);
                });
        },
        //修改状态
      updatestate(){
        const form = new FormData();
        form.set("id", window.sessionStorage.getItem('idss'));
        this.$axios
          .post("/order/updatestate",form)
          .then((res) => {
            if (res.data.code) {
              this.myMessage("success", "订单已支付");
              this.updateadd=false
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
          });
      },
      //生成订单
      tiao(){
        console.log(this.OrderData)
        if(this.OrderData!=null){
          this.myMessage("error", "已生成订单，请前往个人中心-订单模块中对订单进行操作");
        }else{
        this.updateadd=true
        //根据时间生成订单编号
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        // var day = d.getDay();
        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        // var ms = d.getMilliseconds();
        year = (year + "").substring(2);
        if (month <= 9)
          month = "0" + month;
        if (date <= 9)
          date = "0" + date;
        if (hours <= 9)
          hours = "0" + hours;
        if (minutes <= 9)
          minutes = "0" + minutes;
        if (seconds <= 9)
          seconds = "0" + seconds;
        let num = Math.ceil(Math.random()*100);
        console.log(num)
        var Number = year + month + date + hours + minutes + seconds + num;
        const form = new FormData();
        form.set("userId", window.sessionStorage.getItem('userId'));
        form.set("orderNumber", Number);
        form.set("payPrice", window.sessionStorage.getItem('price'));
        form.set("courseId", window.sessionStorage.getItem('idss'));
        this.$axios
          .post("/order/add",form)
          .then((res) => {
            if (res.data.code) {
              this.getOrder()
              this.myMessage("success", "订单已生成，请及时支付");
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
          });
        }
    },
      // 服务协议弹窗
      agreementwindows () {
        this.agreement = true
<<<<<<< HEAD
        // console.log(user.loginName)
      }
=======
      },
      myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
>>>>>>> 7e5efb024ea1dbf01a4f3e6e8ad471419852a7c2
    },
      handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
      handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    }
}
</script>

<style scoped>
    .div1{
        width: 100%;
        height: 100%;
  }
  .div3{
    height: 60vh;
    overflow-x: hidden;
  }
    .box-card{
    width: 80%;
    margin: 0 auto;
  }
  .div1-2{
    width: 100%;
    height: 80px;
  }
  .div1-3{
    width: 100%;
    height: 80px;
  }
  .div1-4{
    width: 100%;
    height: 76px;
  }
  .div1-5{
    width: 100%;
    height: 170px;
  }
  .div2{
    width: 80%;
    height: 150px;
    margin: 0 auto;
    background: rgb(249, 249, 234);
  }
  .span1{
    font-size: 21px;
  }
  .span1-2{
    font-size: 10px;
  }
  .span1-3{
    margin-left: 39px;
  }
  .div1-3-1{
    width: 5%;
    height: 75%;
    padding-left: 38px;
    padding-top: 20px;
    float: left;
  }
  .div1-3-1-1{
    width: 40px;
    height: 40px;
    border-radius: 40px;
  }
  .div1-3-2{
    width: 80%;
    height: 99%;
    float: right;
    padding-right: 106px;
  }
  .span2{
    font-size: 15px;
  }
  .span2-1{
    font-size: 12px;
  }
  .div1-4-1{
    width: 100%;
    height: 28%;
  }
  .div1-4-2{
    width: 91%;
    height: 100%;
    margin: 0 auto;
  }
  .span3{
    font-size: 15px;
    padding-left: 40px;
    font-weight: bold;
  }
  .img1{
    width: 30px;
    height: 30px;
    padding-top: 13px;
    float: left;
  }
  .div1-4-3{
    width: 96%;
    height: 30%;
    float: right;
    padding-top: 20px;
  }
  .span4{
    padding-left: 5px;
    font-size: 15px;
  }
  .div1-5-1{
    width: 100%;
    height: 20%;
  }
  .div1-5-2{
    width: 100%;
    height: 80%;
  }
  .div111{
    width: 42px;
    height: 10px;
    float: left;
  }
  .div1-5-2-1{
    width: 14%;
    height: 60%;
    float: left;
  }
  .div1-5-2-2{
    width: 70%;
    height: 60%;
    float: left;
  }
  .div1-5-2-3{
    width: 11%;
    height: 60%;
    float: right;
  }
  .img2{
    width: 100%;
    height: 100%;
  }
  .span5{
    padding-left: 10px;
    font-size: 15px;
  }
  .span5-1{
    padding-left: 10px;
    font-size: 12px;
  }
  .span6{
    padding-left: 30px;
    font-weight: bold;
  }
  .div2-1{
    width: 730px;
    height: 95px;
    float: left;
  }
  .div2-2{
    width: 170px;
    height: 95px;
    float: right;
  }
  .div2-2-1{
    width: 100%;
    height: 40px;
  }
  .div2-2-2{
    width: 100%;
    height: 55px;
  }
  .span6-1{
    padding-left: 399px;
    font-size: 15px;
    
  }
  .div222{
    width: 100%;
    height: 62px;
  }
  .span6-2{
    font-size: 15px;
  }
  .span7-1{
    font-size: 15px;
    padding-left: 28px;
  }
  .span7-2{
    font-size: 22px;
    font-weight: bold;
    color: rgb(242, 100, 40);
  }
  .span8-1{
    
    padding-left: 35px;
    color: aliceblue;
  }
  .div333{
    width: 10px;
    height: 11px;
  }
  .span1-3{
    color: rgb(214, 209, 209);
  }
  .img3{
    width: 100%;
    height: 100%;
    border-radius: 40px;
  }
  .xieyi{
    width: 300px;
    height: 700px;
  }
</style>